<template>
	<h1 style="text-align: center;">用户信息表</h1>
	<el-table
	  :data="tableData"
	  style="width: 100%"
	  :row-class-name="tableRowClassName"
	>
	  <el-table-column prop="id" label="用户id" width="180" />
	  <el-table-column prop="username" label="用户名" width="180" />
	  <el-table-column prop="phone" label="手机号码" />
	  <el-table-column prop="email" label="电子邮箱"/>
	  <el-table-column prop="status" label="人员状态"/>
	</el-table>
</template>

<script setup lang="ts">
	import axios from 'axios'
	import {onMounted, ref} from 'vue';

	interface User {
	  id: string
	  username: string
	  phone: string
	  email: string
	  status: string
	}
	
	
	const tableRowClassName = ({
	  row,
	  rowIndex,
	}: {
	  row: User
	  rowIndex: number
	}) => {
	  if (rowIndex%2 === 1) {
	    return 'warning-row'
	  } else if (rowIndex%2 === 0) {
	    return 'success-row'
	  }
	  return ''
	}
	
	
	const tableData = ref([])
	
	onMounted(()=>{
		axios.get('/info').then(function Data(response){
			tableData.value = response.data
			console.log(tableData)
		})
	})
	
</script>

<style>
	.el-table .warning-row {
	  --el-table-tr-bg-color: var(--el-color-warning-light-9);
	}
	.el-table .success-row {
	  --el-table-tr-bg-color: var(--el-color-success-light-9);
	}
</style>